<template>
  <div v-loading="loading" class="main-container">
    <div class="headTable">
      <div class="initTable_search" style="width: 360px">
        <span>投放平台：</span>
        <el-select
          v-model="tfvalue_s"
          placeholder="请选择搜索的平台"
          filterable
          clearable
          multiple
          collapse-tags
        >
          <el-option
            v-for="(item, index) in tfoptions"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </div>
      <div class="initTable_search" style="width: 360px">
        <span>大类：</span>
        <el-select
          v-model="tfvalue_ses"
          placeholder="请选择搜索的大类"
          filterable
          clearable
          multiple
          collapse-tags
        >
          <el-option
            v-for="(item, index) in tfoptionses"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </div>
      <div class="initTable_search">
        <span>表单录入时间：</span>
        <el-date-picker
          v-model="datevalue_s"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <el-button
        type="primary"
        class="filter-button"
        icon="wk wk-screening"
        @click="searchTable"
        >搜索</el-button
      >
    </div>
    <div class="content">
      <div class="table-content">
        <div class="handle-bar">
          <el-button class="export-btn" @click="exportClick">导出</el-button>
        </div>
        <el-table
          :data="data"
          :height="tableHeight"
          stripe
          border
          highlight-current-row
          @sort-change="({ prop, order }) => mixinSortFn(data, prop, order)"
        >
          <!-- <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :prop="item.field"
            :label="item.name"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          /> -->
          <el-table-column
            prop="dataFrom"
            label="渠道名称"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="category"
            label="大类"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="allPutin"
            label="录入表单数量"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="weChatNum"
            label="加微信表单数"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="weChatRate"
            label="加微信率(%)"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.weChatRate }} %
            </template>
          </el-table-column>
          <el-table-column
            prop="classNum"
            label="报课表单数量"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="classRate"
            label="报课率(%)"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.classRate }} %
            </template>
          </el-table-column>
          <el-table-column
            prop="putinNum"
            label="成交表单数量"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="putinOkRate"
            label="成交率(%)"
            sortable="custom"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.putinOkRate }} %
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <ul class="tipul">
      <li>合计:</li>
      <li></li>
      <li>{{ data[0] ? data[0].allPutinSum : 0 }}</li>
      <li>{{ data[0] ? data[0].weChatNumSum : 0 }}</li>
      <li>{{ data[0] ? data[0].weChatRateSum : 0 }}%</li>
      <li>{{ data[0] ? data[0].classNumSum : 0 }}</li>
      <li>{{ data[0] ? data[0].classRateSum : 0 }} %</li>
      <li>{{ data[0] ? data[0].putinNumSum : 0 }}</li>
      <li>{{ data[0] ? data[0].putinOkRateSum : 0 }} %</li>
    </ul>
  </div>
</template>

<script>
// import TableMixin from "@/views/crm/mixins/Table";
import BaseMixin from "../mixins/Base";
import SortMixin from "@/views/bi/mixins/Sort";
import FiltrateHandleView from "../components/FiltrateHandleView";
import { queryTMKLeads, tmkExportExcel } from "@/api/bi/achievement";
import request from "@/utils/request";
export default {
  /** TMK统计分析 */
  name: "leadsTmk",
  components: {
    FiltrateHandleView,
  },
  mixins: [SortMixin, BaseMixin],
  data() {
    return {
      loading: false,
      tableHeight: document.documentElement.clientHeight - 265,
      crmType: "leadsTmk",
      postParams: {}, // 筛选参数

      data: [],
      tfvalue_s: "",
      tfvalue_ses: "",
      tfoptions: [],
      tfoptionses: ["电商美工", "手绘插画", "影视后期"],
      datevalue_s: "", //表单录入时间
      fieldList: [
        { field: "dataFrom", name: "渠道名称" },
        { field: "category", name: "大类" },
        { field: "allPutin", name: "录入表单数量" },
        { field: "weChatNum", name: "加微信表单数" },
        { field: "weChatRate", name: "加微信率(%)" },
        { field: "classNum", name: "报课表单数量" },
        { field: "classRate", name: "报课率(%)" },
        { field: "putinNum", name: "成交表单数量" },
        { field: "putinOkRate", name: "成交率(%)" },
      ],
    };
  },
  computed: {},
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 240;
    };
    this.getDataList({});
  },
  methods: {
    searchTable() {
      let cateArr = [];
      for (let i = 0; i < this.tfvalue_ses.length; i++) {
        const cateVal = {
          电商美工: 1,
          手绘插画: 2,
          影视后期: 3,
        }[this.tfvalue_ses[i]];
        cateArr.push(cateVal);
      }
      let params = {
        categoryStr: cateArr.toString(),
        putinPlatform: this.tfvalue_s.toString(),
        startDate: this.datevalue_s ? this.datevalue_s[0] : "",
        endDate: this.datevalue_s ? this.datevalue_s[1] : "",
      };
      if (!this.tfvalue_s && !this.datevalue_s) {
        this.getDataList();
        return;
      }
      this.getDataList(params);
    },
    getDataList(params) {
      this.postParams = params;
      this.loading = true;
      queryTMKLeads(params)
        .then((res) => {
          this.data = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 导出点击
     */
    exportClick() {
      let cateArr = [];
      for (let i = 0; i < this.tfvalue_ses.length; i++) {
        const cateVal = {
          电商美工: 1,
          手绘插画: 2,
          影视后期: 3,
        }[this.tfvalue_ses[i]];
        cateArr.push(cateVal);
      }
      let params = {
        categoryStr: cateArr.toString(),
        putinPlatform: this.tfvalue_s.toString(),
        startDate: this.datevalue_s ? this.datevalue_s[0] : "",
        endDate: this.datevalue_s ? this.datevalue_s[1] : "",
      };

      this.requestExportInfo(tmkExportExcel, params);
    },
  },

  // request({
  //     url: url,
  //     method: "post",
  //     data: crmModel,
  //     headers: {
  //       "Content-Type": "application/json;charset=UTF-8",
  //     },
  //   }).then((res) => {
  //     this.$alert("操作成功", "系统提示", {
  //       confirmButtonText: "确定",
  //       callback: (action) => {
  //         this.reload();
  //       },
  //     });
  //   });

  created() {
    request({
      url: "crmPutinMoney/querySource",
      method: "post",
      data: {},
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
    }).then((res) => {
      this.tfoptions = res.data; //平台
    });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../styles/detail.scss";
.content {
  height: auto !important;
  padding: 0 !important;
}
.table-content {
  padding: 0 60px !important;
}
.content-title {
  padding-bottom: 15px;
  .special {
    font-weight: bold;
    margin-right: 3px;
  }
}
.tipul {
  margin: 0 60px;
  display: flex;
  align-content: center;
  padding: 15px 0;
}
.tipul li {
  flex: 1;
  text-align: center;
}

.initTable_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20px;
  padding: 0 10px;

  span {
    white-space: nowrap;
  }
  .el-select {
    width: 80%;
  }
}
.headTable {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0 20px 50px;
}
</style>
